<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="c1" width="800" height="600"></canvas>
		<script type="text/javascript">
			var c1 = document.querySelector('#c1')
			var ctx = c1.getContext('2d')
			// 保留最原始的坐标以及默认值
			
			function render() {
				ctx.clearRect(0,0,800,600)
				ctx.save()
				// 移动坐标原点到 （400,300）的位置
				ctx.translate(400, 300)
				// 将坐标 x 轴 旋转至之前的 y 轴的位置
				ctx.rotate(-Math.PI/2)
				
				// 保留移动到中心点并且旋转了 x y 轴
				ctx.save()
				
				for(var i = 0; i < 12; i++) {
					// 绘制出时针刻度
					ctx.beginPath()
					ctx.moveTo(170, 0)
					ctx.lineTo(190, 0)
					ctx.lineWidth = 8
					ctx.strokeStyle = 'brown'
					ctx.stroke()
					ctx.closePath()
					ctx.rotate(2*Math.PI/12)
				}
				
				for(var i = 0; i < 60; i++) {
					// 绘制出秒针刻度
					ctx.beginPath()
					ctx.moveTo(180, 0)
					ctx.lineTo(190, 0)
					ctx.lineWidth = 2
					ctx.stroke()
					ctx.closePath()
					ctx.rotate(2*Math.PI/60)
				}
				
				// 回退到之前的中心点的位置
				ctx.restore()
				// 获取到当前的时间
				var time = new Date()
				var hour = time.getHours()
				var min = time.getMinutes()
				var sec = time.getSeconds()
				hour = hour >= 12 ? hour - 12 : hour
				// console.log(hour)
				
				ctx.save()
				// 设置秒针
				ctx.rotate(2*Math.PI/60*sec)
				ctx.beginPath()
				ctx.strokeStyle = 'red'
				ctx.moveTo(-30, 0)
				ctx.lineTo(160, 0)
				ctx.lineWidth = 2
				ctx.stroke()
				ctx.closePath()
				
				// 恢复到中心点的坐标
				ctx.restore()
				ctx.save()
				// 设置分针
				ctx.rotate(2*Math.PI/60*min + 2*Math.PI/60/60*sec)
				ctx.beginPath()
				ctx.moveTo(-20, 0)
				ctx.lineTo(130, 0)
				ctx.lineWidth = 4
				ctx.stroke()
				ctx.closePath()
				
				// 恢复到中心点的坐标
				ctx.restore()
				ctx.save()
				// 设置时针
				ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/12/60*min + 2*Math.PI/12/60/60*sec)
				ctx.beginPath()
				ctx.moveTo(-15, 0)
				ctx.lineTo(110, 0)
				ctx.lineWidth = 8
				ctx.stroke()
				ctx.closePath()
				ctx.restore()
				ctx.restore()
				requestAnimationFrame(render)
			}
			
			// setInterval(()=>{
			// 	render()
			// }, 1000)
			
			/* 缓解cpu的压力,和屏幕刷新率相同 */
			requestAnimationFrame(render)
			
		</script>
	</body>
</html>
